<template>
  <h1>Form 表单</h1>
  <p>常用的表单。</p>
  <h2>基础用法</h2>
  <p>基础的表单用法</p>
  <div class="demo-block">
    <div class="demo-block-content">
      <div class="demo-block-content-row">
        <az-form :model="form" label-width="120px">
          <az-form-item label="Activity name">
            <az-input v-model="form.name" />
          </az-form-item>
          <az-form-item label="Activity zone">
            <az-select v-model="form.region" placeholder="please select your zone">
              <az-option label="Zone one" value="shanghai" />
              <az-option label="Zone two" value="beijing" />
            </az-select>
          </az-form-item>
          <az-form-item label="Instant delivery">
            <az-switch v-model="form.delivery" />
          </az-form-item>
          <az-form-item label="Resources">
            <az-radio-group v-model="form.resource">
              <az-radio label="Sponsor">Sponsor</az-radio>
              <az-radio label="Venue">Venue</az-radio>
            </az-radio-group>
          </az-form-item>
          <az-form-item>
            <az-button type="primary">Create</az-button>
            <az-button>Cancel</az-button>
          </az-form-item>
        </az-form>
        <div>
          <h4>表单绑定的值为：</h4>
          <p>name: {{ form.name }}</p>
          <p>region: {{ form.region }}</p>
          <p>delivery: {{ form.delivery }}</p>
          <p>resource: {{ form.resource }}</p>
        </div>
      </div>
    </div>
    <div class="demo-block-code">
      <pre><code class="language-html">{{ example1 }}</code></pre>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const form = ref({
  name: '',
  region: '',
  delivery: false,
  resource: ''
})
const example1 = `<az-form :model="form" label-width="120px">
  <az-form-item label="Activity name">
    <az-input v-model="form.name" />
  </az-form-item>
  <az-form-item label="Activity zone">
    <az-select v-model="form.region" placeholder="please select your zone">
      <az-option label="Zone one" value="shanghai" />
      <az-option label="Zone two" value="beijing" />
    </az-select>
  </az-form-item>
  <az-form-item label="Instant delivery">
    <az-switch v-model="form.delivery" />
  </az-form-item>
  <az-form-item label="Resources">
    <az-radio-group v-model="form.resource">
      <az-radio label="Sponsor">Sponsor</az-radio>
      <az-radio label="Venue">Venue</az-radio>
    </az-radio-group>
  </az-form-item>
  <az-form-item>
    <az-button type="primary">Create</az-button>
    <az-button>Cancel</az-button>
  </az-form-item>
</az-form>`
</script>
